<template>
  <scroll-view
    class="information_outer"
    @scrolltolower="refreshPageList"
    :scroll-y="true"
  >
    <view class="information_title">
      <view class="information_title_left">
        <image src="@/static/information/titleLogo.png"></image>
      </view>
      <view class="information_title_right">
        <image src="@/static/information/bell.png"></image>
      </view>
    </view>
    <view class="swiper_box">
      <view class="swiper_inner">
        <u-swiper
          :list="imglist"
          :indicator="true"
          indicatorActiveColor="#EC6E32"
          indicatorInactiveColor="#FFFAEF"
          :circular="true"
          @change="changeBanner"
          height="629rpx"
          @click="clickBannerImg"
        ></u-swiper>
        <view class="swiper_inner_title" @click="toInformationDetail(showTextObj.id)">
          <view class="swiper_inner_title_top"><text>#最新热门</text></view>
          <view class="swiper_inner_title_center" v-if=" showTextObj "
            ><text>{{ showTextObj.title }}</text></view
          >
          <view class="swiper_inner_title_down" v-if=" showTextObj"
            ><text>{{ showTextObj.createdAt }}</text></view
          >
        </view>
      </view>
    </view>
    <view class="advisory_center">
      <view class="advisory_center_inner">
        <view class="advisory_center_inner_left">
          <view class="advisory_center_inner_left_img">
            <image src="@/static/information/star.png"></image>
          </view>
          <view class="advisory_center_inner_left_text">
            <text>会员咨询中心</text>
          </view>
        </view>
        <view class="advisory_center_inner_right" @click="goVerificationPage">
          <view class="advisory_center_inner_right_text">
            <text>点击获取价值信息</text>
          </view>
          <view class="advisory_center_inner_right_img">
            <image src="@/static/information/goright.png"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="information_list">
      <view
        class="information_list_item"
        v-for="(newitem, index) in informationList"
        :key="index"
        @click="toInformationDetail(newitem.id)"
      >
        <view class="information_list_item_img">
          <image :src="newitem.cover"></image>
        </view>
        <view class="information_list_item_explain">
          <view class="information_list_item_explain_top"
            ><text>#热门游戏 #手游</text>
            <view class="information_list_item_explain_top_img">
              <image
                src="@/static/information/collect.png"
                v-if="newitem.top == 1"
              ></image>
              <image src="@/static/information/nocollect.png" v-else></image>
            </view>
          </view>
          <view class="information_list_item_explain_center"
            ><text>{{ newitem.title }}</text></view
          >
          <view class="information_list_item_explain_down"
            ><text>{{ newitem.createdAt }}</text></view
          >
        </view>
      </view>
    </view>
    <!-- <view class="authorization_hign">
      <u-overlay :show="isShowOverlayHign" opacity="0.6">
        <view class="authorization_hign_center">
          <view class="authorization_hign_center_img">
            <image src="@/static/information/handler.png"></image>
          </view>
          <view class="authorization_hign_center_text">
            <text class="top">点击“使用完整服务”</text>
            <text class="down">即可享受全部服务</text>
          </view>
          <view
            class="authorization_hign_center_btn"
            @click="isShowOverlayHign = false"
            ><text>知道了</text></view
          >
        </view>
        <view class="authorization_hign_down">
          <view class="authorization_hign_down_img">
            <image src="@/static/information/arrows.png"></image>
          </view>
        </view>
      </u-overlay>
    </view> -->
  </scroll-view>
</template>

<script>
import "./hignIconfont/iconfont.css";
import { reqInformationBanner, reqInformationList } from "@/api/information.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      imglist: [
        // "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        // "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        // "https://cdn.uviewui.com/uview/swiper/swiper3.png",
      ],
      // newsList: [0, 1, 2, 3],
      // 提示遮罩层
      // isShowOverlayHign: true,
      // 轮播图列表
      bannerList: [],
      // 轮播图展示的文字
      showTextObj: {},
      pageSize: 1,
      informationList: [],
      informationListTotal: 0,
    };
  },
  onLoad() {
    this.getInformationBanner();
    this.getInformationList();
  },
  onShow() {
    // const code = uni.getStorageSync("code");
    // if (code) {
    //   this.isShowOverlayHign = false;
    // }
    let userinfo = uni.getStorageSync("userInfo");

    if (userinfo) {
      uni.switchTab({
        url: "/pages/home/index",
      });
    } 
    clearTimeout(this.KlineTimer)
    clearInterval(this.newKlineTimer)
  },
  methods: {
    // 跳转输入唯一验证码页面
    goVerificationPage() {
      uni.removeStorageSync('code');
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
    changeBanner(index) {
      this.showTextObj = this.bannerList[index.current];
    },
    // 资讯banner
    async getInformationBanner() {
      const result = await reqInformationBanner();
      if (result.code == 200 && result.data.length != 0) {
        this.bannerList = result.data
        this.imglist = result.data.map((item) => item.cover);
        this.showTextObj = this.bannerList[0];
      }
    },
    // 资讯分页
    async getInformationList() {
      const sendObj = {
        pageNum: this.pageSize,
        pageSize: 10,
      };
      const result = await reqInformationList(sendObj);
      if (result.code == 200) {
        this.informationList = this.informationList.concat(result.data.list);
        this.informationListTotal = result.data.total;
        // this.bannerList = this.informationList.filter(item=>item.top==1)
        // this.imglist = this.bannerList.map((item) => item.cover);
        // this.showTextObj = this.bannerList[0];
      }
    },
    refreshPageList() {
      if (this.informationList.length >= this.informationListTotal) {
        uni.showToast({
          title: "没有更多了",
          icon: "error",
        });
      } else {
        this.pageSize++;
        this.getInformationList();
      }
    },
    clickBannerImg(index){
      console.log(index);
      
      this.toInformationDetail(this.bannerList[index].id)
    },
    toInformationDetail(id) {
      if(!id) return
      uni.navigateTo({
        url: `/pages/informationDetail/index?id=${id}`,
      });
    },
  },
  computed:{
    ...mapState(['newKlineTimer','KlineTimer'])
  }
};
</script>

<style lang="scss" scoped>
.information_outer {
  width: 100vw;
  height: 100vh;
  background: #fffaef;
  .information_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 64rpx;
    width: 100%;
    .information_title_left {
      width: 242rpx;
      height: 76rpx;
      margin-left: 32rpx;
    }
    .information_title_right {
      width: 40rpx;
      height: 40rpx;
      margin-right: 40rpx;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
  .swiper_box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 52rpx;
    .swiper_inner {
      width: 695rpx;
      height: 629rpx;
      border-radius: 38rpx;
      position: relative;
      .swiper_inner_title {
        position: absolute;
        bottom: 56rpx;
        left: 34rpx;
        .swiper_inner_title_top {
          font-size: 29rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #fffaef;
        }
        .swiper_inner_title_center {
          font-size: 56rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #fffaef;
          width: 498rpx;
          overflow: hidden;
          text-overflow: ellipsis; //文本溢出显示省略号
          white-space: nowrap; //文本不会换行
        }
        .swiper_inner_title_down {
          font-size: 22rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #fffaef;
          opacity: 0.5;
        }
      }
    }
  }
  .advisory_center {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 32rpx;
    .advisory_center_inner {
      width: 695rpx;
      height: 125rpx;
      background: #ff7006;
      border-radius: 38rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .advisory_center_inner_left {
        display: flex;
        align-items: center;
        .advisory_center_inner_left_img {
          width: 52rpx;
          height: 52rpx;
          margin-left: 32rpx;
        }
        .advisory_center_inner_left_text {
          font-size: 38rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #ffffff;
          margin-left: 16rpx;
        }
      }
      .advisory_center_inner_right {
        display: flex;
        align-items: center;
        .advisory_center_inner_right_text {
          font-size: 20rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #ffffff;
          margin-right: 16rpx;
        }
        .advisory_center_inner_right_img {
          width: 46rpx;
          height: 46rpx;
          margin-right: 22rpx;
        }
      }
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .information_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 12rpx;
    margin-top: 32rpx;
    .information_list_item {
      width: 695rpx;
      height: 219rpx;
      background: #f5f0e5;
      border-radius: 38rpx;
      display: flex;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
      }
      .information_list_item_img {
        width: 200rpx;
        height: 200rpx;
        margin-left: 10rpx;
        border-radius: 38rpx;
        overflow: hidden;
      }
      .information_list_item_explain {
        width: 420rpx;
        margin-left: 32rpx;
        .information_list_item_explain_top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          text {
            font-size: 22rpx;
            font-family: DreamHanSansSC;
            font-weight: normal;
            color: #302b27;
            opacity: 0.5;
          }
          .information_list_item_explain_top_img {
            width: 30rpx;
            height: 30rpx;
          }
        }
        .information_list_item_explain_center {
          font-size: 26rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #302b27;
          margin-top: 28rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .information_list_item_explain_down {
          font-size: 22rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #302b27;
          opacity: 0.5;
        }
      }
    }
  }
  .authorization_hign {
    height: 100%;
    width: 100%;
    .authorization_hign_center {
      position: fixed;
      display: flex;
      flex-direction: column;
      align-items: center;
      bottom: 510rpx;
      left: 0;
      right: 0;
      // margin-top: 50%;
      .authorization_hign_center_img {
        width: 212rpx;
        height: 170rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .authorization_hign_center_text {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 38rpx;
        .top {
          font-size: 32rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
        .down {
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #ffa142;
          margin-top: 10rpx;
        }
      }
      .authorization_hign_center_btn {
        width: 205rpx;
        height: 71rpx;
        background: linear-gradient(134deg, #ff7d15 0%, #ffa142 100%);
        border-radius: 38rpx 38rpx 38rpx 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 38rpx;
        text {
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
    .authorization_hign_down {
      position: fixed;
      bottom: 130rpx;
      right: 118rpx;
      .authorization_hign_down_img {
        width: 162rpx;
        height: 378rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
